<template>
  <div class="search flex aic jc-sb">
    <div>
      <span>群组名称：</span>
      <input
        class="inp"
        type="text"
        placeholder="群组名称"
        v-model="value"
        @change="$emit('search', value)"
      />
      <el-button
        type="primary"
        size="small"
        style="height: 30px"
        @click="$emit('search', value)"
        class="mr-20"
        >搜索</el-button
      >
      <span class="result">搜索结果：{{ total }}</span>
    </div>
    <el-button
      type="primary"
      size="small"
      style="height: 36px"
      @click="$emit('handerAdd')"
      >新增群组 +</el-button
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
    };
  },
  methods: {},
  props: ["total"],
};
</script>

<style scoped>
.search {
  box-sizing: border-box;
  width: 100%;
  height: 56px;
  margin-top: 10px;
  background-color: #fff;
  padding: 10px;
}

.inp {
  height: 30px;
  width: 70px;
  padding-left: 10px;
  border-radius: 3px;
  border-color: #c0c4cc;
  margin: 0 10px;
}

.mr-20 {
  margin-right: 20px;
}

.result {
  font-size: 14px;
  color: #7c7c7c;
}
</style>